<template>
	<view>
		<view>
			<view class="address_list_view">
				<view v-for="(item,index) in addressList" :key="index">
					<view>
						<view>收件人:{{item.address_name}}</view>
						<view>地址{{item.address_name}}</view>
						<view>详细地址:{{item.address_name}}</view>
						<view>收件人手机号{{item.address_name}}</view>
						<button @click="updataAddress">修改地址</button>
						<button @click="delAddress">删除地址</button>
						<button @click="setDefaultAddress"><text v-if="item.is_default">默认地址</text><text v-else>设置默认地址</text></button>
					</view>
				</view>
			</view>
			<view v-if="update_v">
				修改地址
			</view>
			<view v-if="add_b">
				<button @click="add_v_show">添加新地址地址</button>
			</view>
			<view v-if="add_v">
				<view class="picker_v">
					<view class="picker_view">
						<button @click="picker_show_province">
							{{show_address.province}}
						</button>
					</view>
					<view class="picker_view">
						<button @click="picker_show_city">
							{{show_address.city}}
						</button>
					</view>
					<view class="picker_view">
						<button @click="picker_show_area">
							{{show_address.area}}
						</button>
					</view>
				</view>
				<view class="picker_v">
					<u-input placeholder="请输入详细地址"></u-input>
				</view>
				<view class="picker_v">
					<u-input placeholder="请输入收件人姓名"></u-input>
				</view>
				<view class="picker_v">
					<u-input placeholder="请输入收件人手机号"></u-input>
				</view>
				<view class="picker_v">
					<button @click="add_v_hide">取消</button>
					<button>添加</button>
				</view>
				<u-picker :show="show_province"  :columns="picker_provinces" @confirm="confirm_province"
					@change="changeHandler"></u-picker>
				<u-picker :show="show_city"  :columns="picker_cities" @confirm="confirm_city"
					@change="changeHandler"></u-picker>
				<u-picker :show="show_area"  :columns="picker_areas" @confirm="confirm_area"
					@change="changeHandler"></u-picker>
			</view>
		</view>

		

		<!-- 
		<button @click="getDefaultAddress">查看默认地址</button>
		<button @click="getAddressList">查看所有地址</button> 
		-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				add_b:true,
				add_v:false,
				update_v:false,
				show_province:false,
				show_city: false,
				show_area:false,
				
				show_address:{
					province:"选择省",
					city:"选择市",
					area:"区/县"
				},
				
				provinces:[],
				cicties:[],
				areas:[],
				
				picker_provinces: [],
				picker_cities: [],
				picker_areas: [],
				
				addres: {
					"address_name": "马仕磊",
					"user_id": "1231",
					"province_id": "131",
					"city_id": "131",
					"area_id": "131",
					"address": "131",
					"mobile": "131412214134",
				},
				addressList: []
			}
		},
		components: {},
		created() {

		},
		onShow() {
			//this.getAddressList();
		},
		onLoad() {
			// this.getCities();
			this.getProvinces();
			// this.getareas();
		},
		methods: {
			add_v_show(){
				this.add_v=true;
			},
			add_v_hide(){
				this.add_v=false;
			},
			picker_show_province(){
				this.show_province=true;
			},
			picker_show_city(){
				this.show_city= true;
			},
			picker_show_area(){
				this.show_area=true;
			},
			// 回调参数为包含columnIndex、value、values
			confirm_province(e) {
				console.log('confirm', e)
				this.show_address.province=e.value;
				this.getCities(this.provinces[e.indexs].provinceid)
				this.show_province = false;
			},
			// 回调参数为包含columnIndex、value、values
			confirm_city(e) {
				console.log('confirm', e)
				this.show_address.city=e.value;
				console.log(this.cicties[e.indexs])
				console.log(this.cicties[e.indexs].areaid)
				this.getareas(this.cicties[e.indexs].areaid);
				this.show_city = false;
			},
			// 回调参数为包含columnIndex、value、values
			confirm_area(e) {
				console.log('confirm', e)
				this.show_address.area=e.value;
				this.show_area = false;
			},
			addAddress() {
				let data = {
					"address_name": "马仕磊",
					"user_id": "1256",
					"province_id": "1",
					"city_id": "1",
					"area_id": "1",
					"address": "1",
					"mobile": "13132467578",
				}
				uni.request({
					url: "http://localhost:8090/address/add",
					method: "POST",
					data: data,
					success(res) {
						console.log(res);
					}
				})
			},
			getAddressList() {
				let that = this;
				uni.request({
					url: "http://localhost:8090/address/getAddressList",
					method: "GET",
					data: "",
					success(res) {
						that.addressList = res.data.data
						console.log(res.data);
					}
				})
			},
			updataAddress() {
				let data = {
					"id": "1",
					"address_name": "马仕磊",
					"user_id": "1001",
					"province_id": "1",
					"city_id": "1",
					"area_id": "1",
					"address": "1",
					"mobile": "13132467578",
				}
				uni.request({
					url: "http://localhost:8090/address/updateAddress",
					method: "POST",
					data: data,
					success(res) {
						console.log(res);
					}
				})
			},
			getDefaultAddress() {
				let data = {
					user_id: "1001"
				}
				uni.request({
					url: "http://localhost:8090/address/getDefaultAddress",
					method: "POST",
					data: data,
					success(res) {
						console.log(res.data);
					}
				})

			},
			getCities(provinceid) {
				console.log(provinceid)
				let that = this;
				uni.request({
					url: "http://localhost:8090/cities/getCities?provinceid="+provinceid,
					method: "GET",
					success(res) {
						that.cicties=res.data.data;
						let list = res.data.data;
						let list1 = [];
						for (let item of list) {
							list1.push(item.city)
						}
						that.picker_cities.push(list1);
						console.log(list1);
						console.log(that.cicties)
					}
				})
			},
			getProvinces() {
				let that = this;
				uni.request({
					url: "http://localhost:8090/provinces/getProvinces",
					method: "GET",
					success(res) {
						that.provinces = res.data.data;
						let list = res.data.data;
						let list1 = [];
						for (let item of list) {
							list1.push(item.province)
						}
						console.log(list1)
						that.picker_provinces.push(list1);
					}
				})
			},
			getareas(areaid) {
				let that = this;
				uni.request({
					url: "http://localhost:8090/areas/getAreas?areaid="+areaid,
					method: "GET",
					success(res) {
						that.areas = res.data.data;
						let list = res.data.data;
						let list1 = [];
						for (let item of list) {
							list1.push(item.area)
						}
						that.picker_areas.push(list1);
					}
				})
			},
			delAddress() {
				let data = {
					id: 2
				}
				uni.request({
					url: "http://localhost:8090/address/delAddress",
					method: "POST",
					data: data,
					success(res) {
						console.log(res.data);
					}
				})

			},
			setDefaultAddress() {
				let data = {
					id: "7",
					user_id: "1001"
				}
				uni.request({
					url: "http://localhost:8090/address/setDefaultAddress",
					method: "POST",
					data: data,
					success(res) {
						console.log(res.data);
					}
				})

			}

		}
	}
</script>

<style>
	.address_view {
		margin: 5px;
		background-color: #ccccca;
		border: 2px solid;
		border-radius: 12px
	}

	.address_sxq {
		font-size: 12px;
		color: #989898;
	}

	.picker_v {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.picker_view {
		width: 32%;
	}
</style>